<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css?v=1.0">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-graduation-cap me-2"></i>学生信息管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-flex">
            <!-- 在 index.html 或其他模板中 -->
            <a th:href="@{/logout}" class="btn btn-outline-light ms-2" th:attr="onclick='event.preventDefault(); document.getElementById(\'logout-form\').submit();'">退出登录</a>
            <form id="logout-form" action="#" th:action="@{/logout}" method="post" th:csrfinput></form>
        </div>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        <i class="fas fa-home me-1"></i>首页
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#aboutModal">
                        <i class="fas fa-info-circle me-1"></i>关于
                    </a>
                </li>
            </ul>
        </div></div></nav>

<div class="container my-5">
    <!-- 头部区域 -->
    <div class="header-card p-4 mb-4 rounded-4 shadow">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="display-5 fw-bold mb-3">学生信息管理</h1>
                <p class="lead mb-0">高效管理学生信息，助力教务工作</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="d-flex flex-column flex-md-row justify-content-md-end gap-3">
                    <div class="position-relative flex-grow-1">
                        <form th:action="@{/students}" method="get">
                            <input type="text" class="form-control form-control-lg ps-5"
                                   name="keyword" th:value="${keyword}"
                                   placeholder="搜索学生...">
                            <i class="fas fa-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                        </form>
                    </div>
                    <a th:href="@{/students/new}" class="btn btn-primary btn-lg px-4">
                        <i class="fas fa-plus me-2"></i>添加学生
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 学生列表卡片 -->
    <div class="card border-0 shadow rounded-4 overflow-hidden">
        <div class="card-header bg-white py-3 border-0">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold">
                    <i class="fas fa-list me-2 text-primary"></i>学生列表
                </h5>
                <div class="text-muted" th:text="'共 ' + ${#lists.size(students)} + ' 名学生'"></div>
            </div></div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light"><tr>
                        <th class="py-3">#</th>
                        <th class="py-3">学生信息</th>
                        <th class="py-3">联系方式</th>
                        <th class="py-3">院系</th>
                        <th class="py-3">年级</th>
                        <th class="py-3 text-end">操作</th></tr></thead>
                    <tbody>
                    <tr th:each="student, stat : ${students}" class="animate__animated animate__fadeIn">
                        <td class="fw-bold" th:text="${stat.count}"></td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm me-3">
                                    <div class="avatar-title bg-light-primary text-primary rounded-circle">
                                        <i class="fas fa-user"></i>
                                    </div></div><div>
                                    <h6 class="mb-0" th:text="${student.name}"></h6>
                                    <small class="text-muted" th:text="${student.email}"></small>
                                </div></div></td>
                        <td th:text="${student.phone}"></td>
                        <td>
                            <span class="badge bg-light text-dark" th:text="${student.department}"></span>
                        </td><td>
                            <span class="fw-bold" th:text="${student.year} + '年级'"></span>
                        </td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-2">
                                <a th:href="@{/students/view/{id}(id=${student.id})}"
                                   class="btn btn-sm btn-light rounded-pill">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a th:href="@{/students/edit/{id}(id=${student.id})}"
                                   class="btn btn-sm btn-light rounded-pill">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a th:href="@{/students/delete/{id}(id=${student.id})}"
                                   class="btn btn-sm btn-light text-danger rounded-pill delete-btn"
                                   onclick="return confirm('确定要删除这名学生吗？此操作不可撤销。');">
                                    <i class="fas fa-trash"></i>
                                </a></div></td></tr></tbody></table></div>

            <!-- 空状态 -->
            <div th:if="${students == null or students.isEmpty()}" class="text-center py-5">
                <div class="py-5">
                    <img src="https://img.icons8.com/ios/100/cccccc/nothing-found.png" width="80" height="80">
                    <h5 class="mt-3">没有找到学生信息</h5>
                    <p class="text-muted mb-4">尝试添加新学生或修改搜索条件</p>
                    <a th:href="@{/students/new}" class="btn btn-primary px-4">
                        <i class="fas fa-plus me-2"></i>添加学生
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <p class="mb-0">© 2023 学生信息管理系统 | 为教育管理赋能</p>
            </div>
            <div class="col-md-6 text-md-end">
                <div class="d-flex justify-content-md-end gap-3">
                    <a href="#" class="text-muted"><i class="fab fa-github"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="text-muted"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- 关于模态框 -->
<div class="modal fade" id="aboutModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">关于学生信息管理系统</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>这是一个基于Spring Boot的学生信息管理系统，旨在帮助教育机构高效管理学生数据。</p>
                <p>系统功能包括：</p>
                <ul>
                    <li>学生信息的增删改查</li>
                    <li>学生信息搜索与筛选</li>
                    <li>数据可视化展示</li>
                    <li>响应式界面设计</li>
                </ul>
                <p class="mb-0">版本：v2.0.0 | 最后更新：2023年6月</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
    // 简单的动画效果
    document.addEventListener('DOMContentLoaded', function() {
        anime({
            targets: '.header-card',
            translateY: [-20, 0],
            opacity: [0, 1],
            duration: 800,
            easing: 'easeOutQuad'
        });
    });
</script>
</body>
</html>